<template>
	<view class="content">
		<MapContainerVue
			class="mapContainer"
			:address="local"
			:activity="activities"
			@update="handleActivity"
		/>

		<u-popup
			ref="popup"
			v-model="popupShow"
			mode="bottom"
			border-radius="14"
			:width="'90vw'"
			:height="'auto'"
			@close="handlePopupClose"
		>
			<u-cell-item
				icon="tags-fill"
				title="活动名称"
				:value="selectedActivity?.name || '未知活动'"
				:arrow="false"
			></u-cell-item>
			<u-read-more show-height="100">
				<rich-text
					:nodes="selectedActivity?.description || '无活动描述'"
				></rich-text>
			</u-read-more>
			<view class="action-container">
				<button
					class="check-in-btn"
					:disabled="selectedActivity?.isCheckIn"
					@click="checkIn(selectedActivity)"
					:style="selectedActivity?.isCheckIn ? 'background-color:#f29100' : 'background-color:#a0cfff'"
				>
					{{ selectedActivity?.isCheckIn ? "已签到" : "签到" }}
				</button>
				<button
					class="nav-btn"
					@click="handleNavigation(selectedActivity)"
				>
					<text class="nav-icon">📍</text>
					<text class="nav-text">导航</text>
				</button>
			</view>
		</u-popup>
		<view class="activity-list">
			<view
				v-for="(activity, index) in activities"
				:key="activity.id"
				class="activity-item"
			>
				<text class="activity-name">{{ index + 1 }}、{{ activity.name }}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import MapContainerVue from "../../component/MapContainer.vue";

// 定义活动类型接口
interface Activity {
	id: number;
	name: string;
	location: {
		longitude: number;
		latitude: number;
	};
	description: string;
	isCheckIn: boolean;
	dis?: number;
}

// 定义组件的属性和方法
const popupShow = ref<boolean>(false);
const local = ref<[number, number]>([116.397428, 39.90923]);
const activities = ref<Activity[]>([
	{
		id: 1,
		name: "公园健身活动",
		location: { longitude: 110.268562, latitude: 32.556099 },
		description: "早晨公园健身活动",
		isCheckIn: false,
	},
	{
		id: 2,
		name: "博物馆参观",
		location: { longitude: 116.404, latitude: 39.916 },
		description:
			"参观历史文化展览参观历史文化展览参观历史文化展览参观历史文化展览",
		isCheckIn: false,
	},
	{
		id: 3,
		name: "233 name",
		location: { longitude: 104.266479, latitude: 30.563036 },
		description: "233 description",
		isCheckIn: false,
	},
	{
		id: 4,
		name: "4 name",
		location: { longitude: -122.0015, latitude: 37.5594 },
		description: "4 description",
		isCheckIn: false,
	},
]);
const selectedActivity = ref<Activity | null>(null);

onMounted(() => {
	uni.getLocation({
		type: "wgs84",
		success: (res) => {
			local.value = [res.longitude, res.latitude];
			console.log("当前位置：", res.longitude, res.latitude);
		},
		fail: () => {
			alert("获取位置失败");
		},
	});
});
const handleActivity = (activity: Activity) => {
	console.log(activity);
	selectedActivity.value = activity;
	popupShow.value = true;
};
//弹出层关闭
const handlePopupClose = () => {
	popupShow.value = false;
	selectedActivity.value = null;
};
//签到
const checkIn = (activity: Activity | null) => {
	if (!activity) return;
	if (activity.dis && activity.dis <= 200) {
		// 找到并更新对应的活动
		const index = activities.value.findIndex(item => item.id === activity.id);
		if (index !== -1) {
			activities.value[index] = {
				...activities.value[index],
				isCheckIn: true
			};
			// 强制更新整个数组以确保响应式
			activities.value = [...activities.value];
		}
		uni.showToast({ title: "签到成功", icon: "success" });
	} else {
		uni.showToast({ title: "距离过远，无法签到", icon: "none" });
	}

	popupShow.value = false;
	selectedActivity.value = null;
};
//导航
const handleNavigation = (activity: Activity | null) => {
	if (!activity) return;
	popupShow.value = false
	uni.openLocation({
		latitude: activity.location.latitude,
		longitude: activity.location.longitude,
		name: activity.name,
		address: activity.description,
		success: () => {
			console.log('导航打开成功');
		},
		fail: (err) => {
			console.error('导航打开失败', err);
			uni.showToast({
				title: '导航打开失败',
				icon: 'none'
			});
		}
	});
};
</script>

<style lang="scss" scoped>
.content {
	height: 100vh;
	width: 100vw;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.mapContainer {
	flex: 1;
}

.activity-list {
	display: flex;
	overflow-x: auto;
}

.action-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	gap: 10px;
}

.check-in-btn {
	height: 150px;
	width: 150px;
	color: white;
	font-size: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-btn {
	height: 40px;
	width: 100px;
	border-radius: 20px;
	background-color: #4CAF50;
	color: white;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 0 15px;
	margin-top: 10px;
	
	&:active {
		opacity: 0.8;
	}
}

.nav-icon {
	font-size: 16px;
}

.nav-text {
	font-size: 14px;
}

.activity-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px;
	border: 1px solid gray;
	box-shadow: gray 1px 1px 1px;
	margin: 20px;
}
</style>
